<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素边距问题</title>
    <style>
        .box1 {
            /* display: block; */
            margin: 50px;
            padding: 50px;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <!-- 
        行内元素边距问题
        原因:行内元素外边距和内边距的垂直方向的边距都不生效
        解决方法:1.另外加一个行高属性
        2.改为块级元素
     -->
    <span class="box1">盒子1</span>
    <span class="box2">盒子2</span>
</body>

</html>